<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%">
<!--
Pottononline.net map location editor
Use GMarkerManager when displaying maps, but not ideal for editing
-->

  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAhcP5rdJ8gtI2Tvrvo88B3BR_tirkabJaindNc0FoauOGCOWtrBTLuwigpG4UD6tSDw3AxxYNXLmcVg"
      type="text/javascript"></script>
    <script type="text/javascript">

    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(52.1287, -0.2129), 14);
	var mapControl = new GMapTypeControl();
	map.addControl(mapControl);
	map.addControl(new GLargeMapControl());
	map.enableScrollWheelZoom();

	GEvent.addListener(map, "click", function(overlay, latlng) {
		if (latlng) {
			var marker = new GMarker(latlng, {draggable:true, bouncy:false});
			GEvent.addListener(marker, "click", function() {
  				var html = 	"<table>" +
						"<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" +
						"<tr><td>Type: </td> <td><select id='type'>" +
						"<option value='pub' SELECTED>Pub</option>" +
						"<option value='food'>Food</option>" +
						"<option value='business'>Business</option>" +
						"<option value='shops'>Shops</option>" +
						"<option value='amenities'>Amenities</option>" +
						"<option value='soc'>Clubs & Societies</option>" +
						"<option value='ents'>Entertainment</option>" +
						"<option value='nature'>Nature</option>" +
						"<option value='poi'>Point Of Interest</option>" +
						"</select> </td></tr>" +
						"<tr> <td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";

				marker.openInfoWindow(html);
			});
			map.addOverlay(marker);
		}
	});
				
      }
    }

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()" style="height: 100%">
    <div id="map" style="width: 100%; height: 96%"></div>
  </body>
</html>

